<template>
  <el-dialog v-model="isDialogShow" :title="title" width="500">
    <div class="button">
      <el-button type="primary">下载导入模板</el-button>
    </div>
    <el-upload :http-request="handleImportHttpRequest" :show-file-list="false" accept=".xls, xlsx" drag>
      <template #default>
        <div class="upload-content">
          <el-icon class="el-icon--upload">
            <upload/>
          </el-icon>
          <div class="el-upload__text">
            <p>
              <span>将文件拖到此处或</span>
              <em>点击上传</em>
            </p>
          </div>
        </div>
      </template>
      <template #tip>
        <div class="el-upload__tip">支持扩展名：.xls, .xlsx</div>
      </template>
    </el-upload>
  </el-dialog>
</template>
<script lang="ts" setup>
import {ElMessage, UploadRequestOptions} from "element-plus";
import {Upload} from "@element-plus/icons-vue";
import {importEmployees} from "@/api/employee";
import {isAxiosError} from "axios";

const isDialogShow = defineModel<boolean>()
defineProps<{ title?: string }>()

async function handleImportHttpRequest({file}: UploadRequestOptions) {
  try {
    const {code, msg} = await importEmployees(file)
    if (code === "200") {
      ElMessage.success(msg)
    } else if (code === "510") {
      ElMessage.error(msg)
    }
  } catch (error) {
    if (isAxiosError(error) && error.response?.data.message != undefined) {
      ElMessage.error(error.response?.data.message);
    }
  }
}
</script>
<style lang="scss" scoped>
.button {
  margin-bottom: 10px;
}
</style>
